<template>
	<view class="yxyl-bind-phone-container" v-if="isShow">
		<view class="yxyl-bind-phone-mask"></view>
		<view class="yxyl-bind-phone-modal">
			<view class="yxyl-bind-phone-modal-s">
				<view class="yxyl-bind-phone-modal-image">
					<image src="https://img-ali.cnyanglao.com/edf11adfeceae4dfa174322aee5a71c.jpg" mode="widthFix" class="image"></image>
				</view>
				<view class="yxyl-bind-phone-modal-text">根据国家法规,使用完整功能需要绑定手机号</view>
			</view>
			<view class="yxyl-bind-phone-modal-buttons">
				<button type="default" class="btn" @tap="close">取消</button>
				<button type="default" class="btn Ok" open-type="getPhoneNumber" @getphonenumber="getphonenumber">继续</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			isShow: true
		};
	},
	methods: {
		...mapMutations('user', ['saveSessionId','logout','removeSessionId']),
		close() {
			this.isShow = false;
		},
		open() {
			this.isShow = true;
		},
		// #ifdef MP-WEIXIN
		async getphonenumber(e) {
			this.close();
			var that = this;
			var [fail, success] = await uni.checkSession();
			var code = '';
			if (fail||!that.$store.state.user.sessionId) {
				var [error, loginRes] = await uni.login({
					provider: 'weixin'
				});
				code = loginRes.code;
			}
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				this.$http
					.request({
						url: 'api/UcenterApi/BindPhone',
						method: 'POST',
						data: {
							EncryptedData: e.detail.encryptedData,
							Iv: e.detail.iv,
							Code: code,
							SessionId: that.$store.state.user.sessionId
						}
					})
					.then(res => {
						that.saveSessionId(res.sessionId);
					}).catch(()=>{
						that.removeSessionId();
						uni.showToast({
							title:'请稍后重新尝试',
							duration: 3000,
							icon:'none'
						});
						
					});
			}
		}
		// #endif
	}
};
</script>

<style lang="scss" scoped>
.yxyl-bind-phone-container {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	.yxyl-bind-phone-mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1020;
		opacity: 0.3;
		filter: alpha(opacity=30);
		background: #000;
	}
	.yxyl-bind-phone-modal {
		z-index: 1021;
		background: #fff;
		border-radius: 15px;
		height: 60vw;
		width: 60vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		.yxyl-bind-phone-modal-s {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.yxyl-bind-phone-modal-image {
			width: 50%;
			.image {
				width: 100%;
			}
		}
		.yxyl-bind-phone-modal-text {
			width: 80%;
			font-size: 30rpx;
		}
		.yxyl-bind-phone-modal-buttons {
			width: 100%;
			display: flex;
			.btn {
				flex-basis: 50%;
				&.Ok {
					background: $uni-color-main-dark;
					color: #fff;
				}
			}
		}
	}
}
</style>
